<template>
  <div>
    <Navigation></Navigation>
    <NuxtPage></NuxtPage>
    <NuxtParticles id="tsparticles" :options="options" @load="onLoad">
    </NuxtParticles>
  </div>
</template>


<script setup lang="ts">
import type { Container } from 'tsparticles-engine'
const nuxtApp = useNuxtApp()

// See tsParticles documentation for all available options
const options = {
  fullScreen: {
    enable: true,
    zIndex: -1
  },
  background: {
    color: {
      value: '#fff'
    }
  },
  particles: {
    color: {
      value: "#000"
    },
    links: {
      color: "#000",
      enable: true
    },
    move: {
      enable: true
    },
    number: {
      value: 100
    }
  }
}

const onLoad = (container: Container) => {
  // Do something with the container
  container.pause()
  setTimeout(() => container.play(), 2000)
}

</script>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

body {
  color: #000;
}
</style>

